<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'考勤打卡',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="nostrongtext shenpi" @click="kaoqintj">考勤统计</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="mainpadding  flexbetween ffffff radius">
				<view class="left flexleft">
					<view class="imgs">
						<image :src="userInfo.avatar_text" mode=""></image>
					</view>
					<view class="mingzi">{{userInfo.username}}</view>
				</view>
				<view class="b-box2btn" @click="mekaoqin">我的考勤</view>
			</view>
		</view>
		<!-- 签到 -->
		<view class="article" @click="daka(1)" v-if="!curr_kq || !curr_kq.start_kqrecord">
			<view class="cicle">
				<view id="outer">
					<view id="inner"></view>
				</view>
			</view>
			<view class="shijian">
				<view class="daka">签到</view>
				<view class="dangqshijian">{{dateFormat(date)}}</view>
			</view>
		</view>
		<!-- 签退 -->
		<view class="articles" @click="daka(2)" v-if="curr_kq && curr_kq.start_kqrecord && !curr_kq.end_kqrecord">
			<view class="cicles">
				<view id="outers">
					<view id="inners"></view>
				</view>
			</view>
			<view class="shijian">
				<view class="daka">签退</view>
				<view class="dangqshijian">{{dateFormat(date)}}</view>
			</view>
		</view>

		<!-- 打卡明细 -->
		<view class="mainpadding2" v-if="curr_kq && curr_kq.start_kqrecord && curr_kq.end_kqrecord">
			<view class="daka">
				<view class="shangban">
					<view class="sbdaka">上班打卡 {{curr_kq.start_kqrecord.signtime_text}}</view>
					<view class="flexleft dizhibox">
						<view class="addressicon2"></view>
						<view class="dizhi">{{curr_kq.start_kqrecord.adress}}</view>
					</view>
					<view class="flexleft">
						<view class="dakatp" v-for="(item,index) in curr_kq.start_kqrecord.images_text" :key="index"
							@click="lbtpriview(index,curr_kq.start_kqrecord.images_text)">
							<image :src="item" mode=""></image>
						</view>
					</view>
					<view class="dizhi flexleft margin_top" v-if="curr_kq.start_kqrecord.notes">
						备注：{{curr_kq.start_kqrecord.notes}}</view>
				</view>
				<view class="shangban">
					<view class="sbdaka">下班打卡 {{curr_kq.end_kqrecord.signtime_text}}</view>
					<view class="flexleft dizhibox">
						<view class="addressicon2"></view>
						<view class="dizhi">{{curr_kq.end_kqrecord.adress}}</view>
					</view>
					<view class="flexleft">
						<view class="dakatp" v-for="(item,index) in curr_kq.end_kqrecord.images_text" :key="index"
						@click="lbtpriview(index,curr_kq.end_kqrecord.images_text)">
							<image :src="item" mode=""></image>
						</view>
					</view>
					<view class="dizhi flexleft margin_top" v-if="curr_kq.end_kqrecord.notes">
						备注：{{curr_kq.end_kqrecord.notes}}</view>
				</view>
				<view class="jindut">
					<image class="yuanincon" src="../../../static/image/system/yuan.png" mode=""></image>
					<view class="jinduline"></view>
					<image class="yuanincon towyuan" src="../../../static/image/system/yuan.png" mode=""></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				date: new Date().toISOString(), //现在时间
				dkstatus: 0, //打卡状态 0 展示上班卡，1展示下班卡，2展示打完卡
				curr_kq: {}, //今日打卡数据
				userInfo: {},
				pageShow: false,
				kq_msg: {}
			}
		},
		onLoad() {
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
			this.userInfo = this.$store.state.userInfo
			console.log(this.userInfo, 999999999);
		},
		onShow() {
			// 获取打卡进度
			this.getdaka_jd()
		},
		methods: {
			// 获取当前位置信息
			getlocation() {
				let _this = this
				console.log("获取经纬度信息")
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log("获取经纬度信息", res)
						_this.lat = res.latitude
						_this.lng = res.longitude
					},
					fail(err) {
						console.log(err, "定位错误信息")
					}
				});
			},
			// 打卡须后台判断今天是否已经打过上班卡，或者打过下班卡，根据上下班卡状态值展示上下班卡页面内容
			// 打卡进度
			getdaka_jd() {
				httpRequest.request('/dhtapi/user/myKqDetail', 'POST', {}, false, false, true).then(
					res => {
						this.curr_kq = res.data.curr_kq
					})
				httpRequest.request('/dhtapi/user/getKqTimeDetail', 'POST', {}, false, false, true).then(
					res => {
						this.kq_msg = res.data
						this.pageShow = true
					})
			},
			// 上下班打卡
			daka(value) {
				let theTime = this.dealDateToUnix(this.dateFormat(this.date))
				console.log(theTime, "theTime");
				if (value == 1) { //上班打卡判断
					let time1 = this.dealDateToUnix(this.kq_msg.kq_start_starttime + ':00');
					let time2 = this.dealDateToUnix(this.kq_msg.kq_start_endtime + ':00');
					if (theTime < time1 || theTime > time2) {
						httpRequest.toast("上班打卡时间为每日" + this.kq_msg.kq_start_starttime + "至" + this.kq_msg
							.kq_start_endtime)
						return false
					}
				} else { //下班打卡判断
					let time1 = this.dealDateToUnix(this.kq_msg.kq_end_starttime + ':00');
					let time2 = this.dealDateToUnix(this.kq_msg.kq_end_endtime + ':00');
					if (theTime < time1 || theTime > time2) {
						httpRequest.toast("下班打卡时间为每日" + this.kq_msg.kq_end_starttime + "至" + this.kq_msg.kq_end_endtime)
						return false
					}
				}
				uni.navigateTo({
					url: "/pages/workbench/xiaoshou/waiqindk?type=" + value
				})
			},
			//时间处理-将时分秒转为时间戳
			dealDateToUnix(time) {
				if (time !== null) {
					let s = "";
					let hour = time.split(":")[0];
					var min = time.split(":")[1];
					var sec = time.split(":")[2];
					s = Number(hour * 3600) + Number(min * 60) + Number(sec);
					return s;
				}
			},
			lbtpriview(index,arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//我的考勤
			mekaoqin() {
				uni.navigateTo({
					url: "/pages/workbench/xiaoshou/wodekq"
				})
			},
			// 考勤统计
			kaoqintj() {
				uni.navigateTo({
					url: "/pages/workbench/xiaoshou/kaoqinsx"
				})
			},
			dateFormat(time) {
				return httpRequest.dateFormat(time)
			},
		}

	}
</script>

<style lang="scss" scoped>
	.articles {
		position: relative;
	}

	.daka {
		font-size: 42rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}

	.dangqshijian {
		font-size: 42rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.article {
		position: relative;
	}

	.shijian {
		position: absolute;
		top: 35%;
		left: 38%;
	}

	.riqi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.mingzi {
		margin-bottom: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.imgs {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		margin-right: 18rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.b-box2btn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 198rpx;
		height: 62rpx;
		background: #0BBDCB;
		border-radius: 74rpx;
	}

	* {
		box-sizing: border-box;
	}

	.cicle {
		margin: 96rpx auto;
		width: 390rpx;
		height: 390rpx;
		/* background-color: skyblue; */
		padding: 30rpx;
		animation-name: outer;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	#outer {
		height: 100%;
		border: 5rpx solid #e0f4f3;
		background: #e0f4f3;
		border-radius: 50%;
		padding: 30rpx;
		animation-name: inner;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	#inner {
		height: 100%;
		background: #0BBDCB;
		border: 20rpx solid #8edce2;
		border-radius: 50%;
	}

	.text {
		color: white;
		text-align: center;
		line-height: 100rpx;
	}

	@keyframes outer {
		25% {
			padding: 10rpx;
		}

		50% {
			padding: 20rpx;
		}

		100% {
			padding: 20rpx;
		}
	}


	@keyframes inner {
		25% {
			padding: 30rpx;
		}

		50% {
			padding: 20rpx;
		}

		75% {
			padding: 30rpx;
		}

		100% {
			padding: 20rpx;
		}

	}

	.cicles {
		margin: auto;
		width: 390rpx;
		height: 390rpx;
		/* background-color: skyblue; */
		padding: 30rpx;
		animation-name: outer;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	#outers {
		height: 100%;
		border: 5rpx solid #faf2e7;
		background: #faf2e7;
		border-radius: 50%;
		padding: 30rpx;
		animation-name: inner;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	#inners {
		height: 100%;
		background: #F3AD3D;
		border: 20rpx solid #f8d4a5;
		border-radius: 50%;
	}

	@keyframes outers {
		25% {
			padding: 10rpx;
		}

		50% {
			padding: 20rpx;
		}

		100% {
			padding: 20rpx;
		}
	}


	@keyframes inners {
		25% {
			padding: 30rpx;
		}

		50% {
			padding: 20rpx;
		}

		75% {
			padding: 30rpx;
		}

		100% {
			padding: 20rpx;
		}


	}

	.dakatp {
		width: 110rpx;
		height: 110rpx;
		margin-right: 30rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;

		image {
			border-radius: 16rpx;
			width: 100%;
			height: 100%;
		}
	}

	.jindut {
		position: absolute;
		top: 0;
		left: 0;
	}

	.jinduline {
		position: relative;
		left: 44%;
		top: 20%;
		bottom: 14rpx;
		height: 244rpx;
		width: 2rpx;
		background-color: #BEC0BF;
	}

	.yuanincon {
		width: 24rpx;

		height: 24rpx;
	}

	.towyuan {
		position: relative;
		bottom: 30rpx;
	}

	.shangban {
		margin: 54rpx 0 0 40rpx;
	}

	.dizhi {
		font-size: 24rpx;
		margin-left: 10rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.riqi {
		font-size: 24rpx;
		margin-top: 16rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.daka {
		position: relative;
	}

	.sbdaka {
		color: #333;
		font-size: 32rpx;
		line-height: 40rpx;
		font-weight: 500;
		text-align: left;
	}
</style>